<template>
  <div style="width:1400px">
    <div class="msg-top-text">视频协议</div>
    <video
      id="videoElement"
      class="video"
      :controls="true"
      autoplay
      muted
    />
    <el-input v-model="video.url" placeholder="请输入url" style="margin-left:16px; margin-top:10px; width:1000px" />
    <el-button type="primary" style="margin-left:10px" @click="submit">提交</el-button>
  </div>
</template>
<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      flvPlayer: null,
      video: {
        url: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      this.start()
    },
    start() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            isLive: true,
            hasAudio: false,
            hasVideo: true,
            stashInitialSize: 512,
            url: this.video.url
          },
          {
            // enableWorker: true, //不启用分离线程
            enableStashBuffer: false, // 关闭 IO 隐藏缓冲区
            autoCleanupSourceBuffer: true // 自动清除缓存
          })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    play() {
      this.flvPlayer.play()
    },
    destroyed() {
      if (this.flvPlayer) {
        this.flvplayer.pause()
        this.flvplayer.unload()
        this.flvplayer.detachMediaElement()
        this.flvplayer.destroy()
        this.flvplayer = null
      }
    }
  }
}
</script>
<style scope>
.msg-top-text{
  font-size: 1.2em;
  color: #4D4F5C;
  border-bottom:0.08em solid dimgray;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}
.video{
  width:1320px;
  height:800px;
  margin-top:10px;
  margin-left:18px;
  overflow:hidden;
  background:rgba(0,0,0,0.5);
}

</style>
